<template>
  <div id="searchTalent" @click="thisFalse">
    <div class="btn_group">
      <button
        @click="$router.push(`/talent_main/liveSearchRoot?keyword=${input}`)"
      >
        直播搜索
      </button>
      <button @click="$router.push(`/talent_main/searchRoot?keyword=${input}`)">
        商品搜索
      </button>
      <button class="active">达人搜索</button>
    </div>
    <!-- 搜索条件 -->
    <div class="topBox">
      <div class="mysearchBox">
        <div class="input_group">
          <input
            type="text"
            v-model="input"
            @keyup.enter="searchWord"
            placeholder="请输入抖音昵称或抖音号进行搜索"
            @click.stop="Inputfocus"
          />
          <div @click="searchWord">
            <img src="@/assets/meng/search01.png" />
          </div>
        </div>
        <div class="clearBox Included" @click="cludeBox()">
          <img src="@/assets/wang/work/include.png" alt />
          <span>添加收录</span>
        </div>
        <div class="clearBox" @click="clear_values">
          <img src="@/assets/wang/work/clearAll.png" alt />
          <span>重置筛选条件</span>
        </div>
        <!-- 搜索记录框 -->
        <div
          class="InputRecord"
          v-show="isShow && searchRecord.length !== 0 && input.length == 0"
        >
          <ul>
            <li class="first">
              搜索记录
              <img src="@/assets/zhao/delete.png" alt @click="removeAll()" />
            </li>
            <li
              class="second"
              v-for="(item, index) in searchRecord"
              :key="index"
              @click="add_click(item.log)"
            >
              <span>{{ item.log }}</span>
              <img
                src="@/assets/meng/my_header01.png"
                alt
                @click.stop="removeThis(item.id)"
              />
            </li>
          </ul>
        </div>
      </div>
      <category_industry v-model="industryItemObj" :class="'mt_20'"/>
      <!-- 展开搜索条件的 -->
      <div class="showCondition" v-show="showCondition">
        <section class="section01 mt_20">
          <p>达人筛选</p>
          <div>
            <el_select
              v-model="value01"
              title="粉丝数"
              src="../../../../static/meng/search02.png"
              :options="[
                '不限',
                '10万-50万',
                '50万-100万',
                '100万-500万',
                '500万-1000万',
                '>1000万',
              ]"
            />
            <!-- :options="['不限','<1万','1万-10万','10万-50万','50万-100万','100万-500万','500万-1000万','>1000万']" /> -->
            <el_select
              v-model="value02"
              title="点赞数"
              src="../../../../static/meng/search03.png"
              :options="[
                '不限',
                '10万-50万',
                '50万-100万',
                '100万-200万',
                '>200万',
              ]"
            />
            <!-- :options="['不限','<1万','1万-10万','10万-50万','50万-100万','100万-200万','>200万']" /> -->
            <!-- <el_select v-model="value03"
                   title="掌上指数"
                   src='../../../../static/meng/search04.png'
            :options="['不限','<60','60-75','75-85','85-100']" />-->
            <el_select
              v-model="value04"
              title="认证类型"
              src="../../../../static/meng/search05.png"
              :options="['不限', '个人认证', '企业认证']"
            />
            <el_select
              v-model="value05"
              title="作品数"
              src="../../../../static/meng/search06.png"
              :options="['不限', '<10', '10-50', '50-100', '>100']"
            />
            <el_select
              v-model="value06"
              title="商品数"
              src="../../../../static/meng/search07.png"
              :options="['不限', '<10', '10-50', '50-100', '>100']"
            />
            <!-- <multi_select v-model="value07" :options="['开通商品橱窗', '30天内上过达人销量榜']" /> -->
            <multi_select v-model="value07" :options="['开通商品橱窗']" />
          </div>
        </section>
        <section class="section01">
          <p>达人画像</p>
          <div>
            <el_select
              v-model="value08"
              title="达人年龄"
              src="../../../../static/meng/search08.png"
              :options="[
                '不限',
                '18-24',
                '25-30',
                '31-35',
                '36-40',
                '41-45',
                '46-50',
                '其他',
              ]"
            />
            <el_select
              v-model="value09"
              title="达人性别"
              src="../../../../static/meng/search09.png"
              :options="['不限', '男', '女']"
            />
            <el_select_city
              v-model="value10"
              title="达人地域"
              src="../../../../static/meng/search10.png"
            />
            <!-- <el_select v-model="value11"
                   title="达人星座"
                   src='../../../../static/meng/search11.png'
            :options="['不限','白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座']" />-->
          </div>
        </section>
        <section class="section01">
          <p>粉丝画像</p>
          <div>
            <el_select
              v-model="value12"
              title="主要年龄"
              src="../../../../static/meng/search08.png"
              :options="[
                '不限',
                '18-24',
                '25-30',
                '31-35',
                '36-40',
                '41-45',
                '46-50',
                '其他',
              ]"
            />
            <el_select
              v-model="value13"
              title="主要性别"
              src="../../../../static/meng/search09.png"
              :options="['不限', '男', '女']"
            />
            <!-- <el_select_city v-model="value14"
                        title="主要地域"
            src='../../../../static/meng/search10.png' />-->
            <el_select
              v-model="value15"
              title="主要星座"
              src="../../../../static/meng/search11.png"
              :options="[
                '不限',
                '白羊座',
                '金牛座',
                '双子座',
                '巨蟹座',
                '狮子座',
                '处女座',
                '天秤座',
                '天蝎座',
                '射手座',
                '摩羯座',
                '水瓶座',
                '双鱼座',
              ]"
            />
          </div>
        </section>
        <div class="dividerBox">
          <div class="dividerText" @click="showCondition = false">
            <img src="@/assets/wang/work/closeCon.png" alt />
            收起筛选条件
          </div>
        </div>
      </div>
      <!-- 收起搜索条件的 -->
      <div class="dividerBox" v-show="!showCondition">
        <div class="dividerText" @click="showCondition = true">
          <img src="@/assets/wang/work/openCon.png" alt />
          展开筛选条件
        </div>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div
      id="search_result"
      style="min-height: 75vh; background: #fff; padding-bottom: 1px"
    >
      <!-- <searchResult v-if="!loading" /> -->
      <div>
        <section class="type"></section>
        <ul
          class="fixedThead"
          ref="fixedThead"
          :class="{ isShow: isFixed }"
          :style="showLeft ? 'left:98px' : 'left:222px'"
        >
          <li style="padding-left: 63px">达人</li>
          <li
            tc
            class="cursor"
            v-if="orderType == 'desc' && sortValue == 'totalfans'"
            @click="sort_fun(true, 'totalfans')"
          >
            粉丝总量
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 'totalfans'"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li tc v-else @click="sort_fun(false, 'totalfans')" class="cursor">
            粉丝总量
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderType == 'asc' && sortValue == 'totalfans'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <!-- <li tc>作品总量</li> -->
          <li
            tc
            class="cursor"
            v-if="orderType == 'desc' && sortValue == 'totalvideo'"
            @click="sort_fun(true, 'totalvideo')"
          >
            作品总量
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 'totalvideo'"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li tc v-else @click="sort_fun(false, 'totalvideo')" class="cursor">
            作品总量
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderType == 'asc' && sortValue == 'totalvideo'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li
            tc
            class="cursor"
            v-if="orderType == 'desc' && sortValue == 'totalfavorite'"
            @click="sort_fun(false, 'totalfavorite')"
          >
            点赞总量
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 'totalfavorite'"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else class="sort" />
          </li>
          <li
            tc
            v-else
            @click="sort_fun(false, 'totalfavorite')"
            class="cursor"
          >
            点赞总量
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderType == 'asc' && sortValue == 'totalfavorite'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <!-- <li tc>商品数</li> -->
          <li
            tc
            class="cursor"
            v-if="orderType == 'desc' && sortValue == 'procount'"
            @click="sort_fun(true, 'procount')"
          >
            商品数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderType == 'desc' && sortValue == 'procount'"
              class="sort"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li tc v-else @click="sort_fun(false, 'procount')" class="cursor">
            商品数
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderType == 'asc' && sortValue == 'procount'"
            />
            <img src="@/assets/meng/no_down_up.png" v-else />
          </li>
          <li tc>直播场次</li>
          <li tc>带货直播</li>
        </ul>
        <table class="table" ref="tableEl">
          <thead>
            <tr :class="{ is_fixed: isFixed }" ref="th_tr_El">
              <th>达人</th>
              <th
                @click="sort_fun(true, 'totalfans')"
                v-if="orderType == 'desc' && sortValue == 'totalfans'"
                class="cursor"
              >
                粉丝总量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 'totalfans'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(false, 'totalfans')" class="cursor">
                粉丝总量
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 'totalfans'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!-- <th>作品总量</th> -->
              <th
                @click="sort_fun(true, 'totalvideo')"
                v-if="orderType == 'desc' && sortValue == 'totalvideo'"
                class="cursor"
              >
                作品总量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 'totalvideo'"
                  class="sort"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(false, 'totalvideo')" class="cursor">
                作品总量
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 'totalvideo'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th
                @click="sort_fun(true, 'totalfavorite')"
                v-if="orderType == 'desc' && sortValue == 'totalfavorite'"
                class="cursor"
              >
                点赞总量
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 'totalfavorite'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th
                v-else
                @click="sort_fun(false, 'totalfavorite')"
                class="cursor"
              >
                点赞总量
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 'totalfavorite'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <!-- <th>商品数</th> -->
              <th
                @click="sort_fun(true, 'procount')"
                v-if="orderType == 'desc' && sortValue == 'procount'"
                class="cursor"
              >
                商品数
                <img
                  src="@/assets/meng/down_up.png"
                  v-if="orderType == 'desc' && sortValue == 'procount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th v-else @click="sort_fun(false, 'procount')" class="cursor">
                商品数
                <img
                  src="@/assets/meng/up_down.png"
                  v-if="orderType == 'asc' && sortValue == 'procount'"
                />
                <img src="@/assets/meng/no_down_up.png" v-else />
              </th>
              <th>直播场次</th>
              <th>带货直播</th>
            </tr>
          </thead>
          <tbody v-if="table_data.length != 0 && !loading && !permissions">
            <tr
              v-for="(item, index) in table_data"
              :key="'table' + index"
              :id="!index ? 'tr1' : ''"
            >
              <td>
                <div class="goodsBox" @click="go_to_page01(item.author_id)">
                  <img
                    v-if="item.is_delete != 2 && item.is_delete != 3"
                    :src="item.logo"
                    class="preImg"
                    v-errorImg:talent
                  />
                  <img
                    v-if="item.is_delete == 2 || item.is_delete == 3"
                    src="@/assets/shi/detail.jpg"
                    class="preImg"
                    alt
                  />
                  <!-- 直播标识 -->
                  <div class="playingIcon" v-if="item.live_status == 1">
                    <p class="livingGif">
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                    </p>
                  </div>
                  <div class="goodsRight">
                    <div class="top01">
                      <!-- 来源 -->
                      <!-- <div style="margin-right: 5px; margin-bottom: 4px">
                        <SourceIcon :sourceid="item.profrom" />
                      </div>-->
                      <div class="overflowTextWl">{{ item.nickname }}</div>

                      <!-- 橱窗 -->
                      <img
                        v-show="item.is_shop"
                        src="../../../assets/meng/search_result01.png"
                      />
                      <!-- 后面的对勾 -->
                      <img
                        v-show="item.verify_type == 1"
                        src="../../../assets/meng/search_result02.png"
                      />
                      <img
                        v-show="item.verify_type == 2"
                        src="../../../assets/meng/search_result03.png"
                      />
                      <div class="details" v-if="item.is_delete == 2">
                        已封号
                      </div>
                      <div class="details" v-if="item.is_delete == 3">
                        已注销
                      </div>
                    </div>
                    <div class="bot01">
                      <p>抖音号：{{ item.unique_id }}</p>
                      <!-- <p>
                        售价<span class="riceText">￥{{ item.proPrice }}</span>
                      </p>
                      <p>
                        佣金率
                        <span
                          class="rateText"
                          v-if="item.commissionRate != ''"
                          >{{ formatRate(item.commissionRate, 1) }}</span
                        >
                        <span class="rateText" v-else>--</span>
                      </p>-->
                    </div>
                  </div>
                </div>
              </td>
              <td style="width: 12%">{{ format_num(item.total_fans) }}</td>
              <td style="width: 11%">
                <p>{{ format_num(item.total_video) }}</p>
              </td>
              <td style="width: 11%">
                <p>{{ format_num(item.total_favorite) }}</p>
              </td>
              <td style="width: 10%">
                <p>{{ format_num(item.pro_shop_count) }}</p>
              </td>
              <td style="width: 12%">{{ format_num(item.live_count) }}</td>
              <td style="width: 12%">{{ format_num(item.live_pro_count) }}</td>
            </tr>
          </tbody>
        </table>
        <div class="upgradeBox" v-if="permissions">
          <RankUpgrade class="rankUpgrade" />
        </div>
        <p
          class="nothing"
          v-show="table_data.length != 0 && table_data.length < 30"
        >
          我是有底线的～
        </p>
        <div
          class="search-pagination pageBox"
          v-if="!loading && table_data.length != 0"
        >
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="count"
            :page-size="30"
            :current-page="page"
            @current-change="getData"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>

        <!-- </div> -->
      </div>
      <div
        v-loading="loading"
        v-if="loading && !permissions"
        class="loading"
        style="margin-top: 66px"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>

      <div class="empty" v-show="!loading && table_data.length == 0">
        <img src="@/assets/liu/zw.png" />
        <p style="margin-top: 0">暂时没有找到达人哦~</p>
        <div
          class="addIncludeBtn"
          v-if="canInclude"
          @click="
            showInclude = true;
            clear_values();
          "
        >
          <img src="@/assets/wang/work/addIcon.png" alt />
          <span>添加收录</span>
        </div>
      </div>
    </div>
    <!-- 添加收录 -->
    <el-dialog
      :visible.sync="showInclude"
      width="600px"
      top="22.5vh"
      class="dialog01"
      @close="
        showInclude = false;
        includeWord = '';
        hasSearch = false;
      "
    >
      <div class="includeDialog">
        <p class="diaTitle">添加收录</p>
        <div class="input_group includeInput">
          <input
            type="text"
            v-model="includeWord"
            @keyup.enter="includeSearchOne()"
            placeholder="请输入抖音号进行搜索"
          />
          <div @click="includeSearchOne()">
            <img src="@/assets/meng/search01.png" />
          </div>
        </div>
        <div v-if="hasSearch">
          <div
            class="includeResult"
            @scroll.passive="getScroll($event)"
            v-if="includeList.length"
          >
            <div
              class="includeItem"
              v-for="(item, index) in includeList"
              :key="index"
            >
              <img
                :src="item.avatar_larger"
                class="inLogo"
                @click="toTalentDetails(item.uid, item.exsit)"
              />
              <div class="nameBox">
                <p @click="toTalentDetails(item.uid, item.exsit)">
                  {{ item.title }}
                </p>
                <p>{{ item.text_fans }}</p>
              </div>
              <button
                class="toInclude"
                @click="toInclude(item.sec_uid, item.uid, item)"
                v-if="item.exsit == 0"
              >
                添加收录
              </button>
              <button v-if="item.exsit == 2">正在收录</button>
              <button v-if="item.exsit == 1">已收录</button>
            </div>
            <p v-if="!loading01 && includeData" class="includeText">
              找不到想找的账号？
              <el-popover
                placement="right"
                trigger="hover"
                popper-class="popoverBox"
              >
                <img src="@/assets/img/xiaozhushou_qr.jpg" class="codeImg" />
                <span slot="reference" class="codeShow">告诉我们</span>
              </el-popover>
            </p>
          </div>

          <div
            v-loading="loading01"
            v-if="loading01"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div
            class="empty"
            v-show="!loading01 && includeList.length == 0 && !retryShow"
          >
            <img src="@/assets/liu/zw.png" />
            <p>请输入抖音号或抖音昵称进行收录</p>
          </div>
          <div
            v-show="!loading01 && retryShow && includeList.length != 0"
            @click="includeSearch()"
            class="retryBox"
          >
            <div class="imgBox"></div>

            <p>请点击重试</p>
          </div>
          <div
            @click="includeSearch()"
            class="retryBox retryBox1"
            v-show="!loading01 && retryShow && includeList.length == 0"
          >
            <div class="imgBox"></div>
            <p>请点击重试</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RadioGroupSort from "@/component/radioGroupSort.vue";
import RankUpgrade from "@/component/rankUpgrade.vue";
import category_industry from '@/component/category_industry';
export default {
  name: "searchTalent",
  components: {
    RadioGroupSort,
    RankUpgrade,
    category_industry
  },
  data() {
    return {
      input: "",
      cancel: null,
      value01: "不限",
      value02: "不限",
      value03: "不限",
      value04: "不限",
      value05: "不限",
      value06: "不限",
      value07: "",
      value08: "不限",
      value09: "不限",
      value10: "不限,不限",
      value11: "不限",
      value12: "不限",
      value13: "不限",
      value14: "不限,不限",
      value15: "不限",
      options: [
        "不限",
        "<1w",
        "5w<10w",
        "10w<50w",
        "50w<100w",
        "100w<500w",
        "500w<1000w",
        ">1000w",
      ],
      input_btn: "达人",
      showCondition: false,
      my_radio: "iPhone",
      count: 0,
      cancel01: null,
      cancel02: null,
      cancel03: null,
      cancel04: null,
      page: 1,
      table_data: [],
      loading: true,
      value16: "粉丝最多",
      showInclude: false,
      includeWord: "",
      includeList: [],
      loading01: false,
      hasSearch: false,
      canInclude: false,
      permissions: false,
      isFixed: false,
      offsetTop: 0,
      showLeft: true,
      showScroll: 334,
      sortValue: "totalfans", //表头筛选条件
      orderType: "desc",
      isShow: false, // 控制搜素框显示或隐藏
      searchRecord: [], //用来存放浏览记录
      includePage: 1,
      includeData: false,
      retryShow: false,
      industryItemObj:{
        name:'全部',
        id:'0'
      }
    };
  },
  computed: {
    // 将需要监听的属性放在一个对象里面
    changeData() {
      const {
        industryItemObj,
        value01,
        value02,
        value03,
        value04,
        value05,
        value06,
        value07,
        value08,
        value09,
        value10,
        value11,
        value12,
        value13,
        value14,
        value15,
        value16,
      } = this;
      return {
        industryItemObj,
        value01,
        value02,
        value03,
        value04,
        value05,
        value06,
        value07,
        value08,
        value09,
        value10,
        value11,
        value12,
        value13,
        value14,
        value15,
        value16,
      };
    },
  },
  watch: {
    // 监听条件是否发生变化
    changeData() {
      this.page = 1;
      this.table_data = [];
      this.getData();
    },
    input: function (newVal, oldVal) {
      if (newVal == "") {
        this.page = 1;
        this.sortValue = "";
        this.table_data = [];
        this.getData();
      } else {
        this.input00 = this.input; //存储文本框输入的内容
        this.includeWord = this.input00; //文本内容赋值到添加收入的框中
      }
    },
    "$store.state.left_nav_flag"(old, newOld) {
      this.showLeft = old;
      this.setTBBar();
    },
    showCondition(old, newOld) {
      if (newOld) {
        this.showScroll = 334;
      } else {
        this.showScroll = 564;
      }
    },
  },
  created() {
    this.showLeft = this.$store.state.left_nav_flag;
    if (this.$route.query.keyword) {
      this.input = this.$route.query.keyword;
    }
    this.getData();
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    window.addEventListener("resize", () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },
  methods: {
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector("#tr1");
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + "px";
          }
        }
      });
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`,
      });
      window.open(router.href, "_blank");
    },
    // 排序
    sort_fun(parm01, parm02) {
      // console.log(parm02)
      if (parm01) {
        this.orderType = "asc";
      } else {
        this.orderType = "desc";
      }
      this.sortValue = parm02;
      this.dataList = [];
      this.page = 1;
      this.getData();
    },
    getData(cpage) {
      let that = this;
      that.loading = true;
      that.permissions = false;
      if (cpage) {
        this.backTop();
        this.page = cpage;
      }
      let fans;
      if (this.value01.indexOf(">") != -1) {
        fans = "10000000-99999999";
      } else if (this.value01.indexOf("<") != -1) {
        fans = "0-10000";
      } else {
        fans = this.value01.replace(/万/g, "0000");
      }
      let favorite_count;
      if (this.value02.indexOf(">") != -1) {
        favorite_count = "2000000-99999999";
      } else if (this.value02.indexOf("<") != -1) {
        favorite_count = "0-10000";
      } else {
        favorite_count = this.value02.replace(/万/g, "0000");
      }
      let hint;
      if (this.value03.indexOf("<") != -1) {
        hint = "0-60";
      } else {
        hint = this.value03;
      }
      let viedo_count;
      if (this.value05.indexOf("<") != -1) {
        viedo_count = "0-10";
      } else if (this.value05.indexOf(">") != -1) {
        viedo_count = "100-9999999";
      } else {
        viedo_count = this.value05;
      }
      let pro_count;
      if (this.value06.indexOf("<") != -1) {
        pro_count = "0-10";
      } else if (this.value06.indexOf(">") != -1) {
        pro_count = "100-9999999";
      } else {
        pro_count = this.value06;
      }
      this.$axios
        .post(
          "/api/author/search",
          {
            keyword: that.trimStr(that.input),
            fans: fans,
            category: this.industryItemObj.id,
            gender: that.value09 == "女" ? 2 : that.value09 == "男" ? 1 : 3,
            // age: that.value08 == '40+' ? '40-1000' : that.value08,
            age: that.value08,
            star: that.value11,
            province: that.value10.split(",")[0],
            city: that.value10.split(",")[1],
            favorite_count: favorite_count,
            hint: hint,
            verify_type:
              that.value04 == "个人认证"
                ? 1
                : that.value04 == "企业认证"
                ? 2
                : 3,
            video_count: viedo_count,
            pro_count: pro_count, //暂时传0  pro_count
            is_shop: that.value07.indexOf("开通商品橱窗") == -1 ? 0 : 1,
            is_top_sale:
              that.value07.indexOf("30天内上过达人销量榜") == -1 ? 0 : 1,
            more_gender:
              that.value13 == "女" ? 2 : that.value13 == "男" ? 1 : 3,
            // more_age: that.value12 == '40+' ? '40-999999' : that.value12,
            more_age: that.value12,
            more_star: that.value15,
            more_province: that.value14.split(",")[0],
            more_city: that.value14.split(",")[1],
            page: that.page,
            size: 30,
            order_by: this.orderType,
            sort: this.sortValue,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel) that.cancel();
              that.cancel = c;
            }),
          }
        )
        .then((response) => {
          if (response.data.code == 0) {
            this.count = response.data.count;
            if (response.data.count > 6000) {
              this.count = 6000;
            } else {
              this.count = response.data.count;
            }
            // this.count = response.data.count;
            this.table_data = response.data.data;
            this.loading = false;
            that.canInclude = false;
            this.setTBBar();
          } else if (response.data.code == 1002) {
            this.loading = false;
            this.table_data = [];
            // 搜索条件不限的时候 搜索不到达人的话显示添加收录
            if (
              this.industryItemObj.name == "全部" &&
              this.value01 == "不限" &&
              this.value02 == "不限" &&
              this.value03 == "不限" &&
              this.value04 == "不限" &&
              this.value05 == "不限" &&
              this.value06 == "不限" &&
              this.value07 == "" &&
              this.value08 == "不限" &&
              this.value09 == "不限" &&
              this.value10 == "不限,不限" &&
              this.value11 == "不限" &&
              this.value12 == "不限" &&
              this.value13 == "不限" &&
              this.value14 == "不限,不限" &&
              this.value15 == "不限" &&
              this.page == 1
            ) {
              that.canInclude = true;
            } else {
              that.canInclude = false;
            }
          } else if (response.data.code == 1013) {
            that.loading = false;
            that.permissions = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    clear_values() {
      this.input = "";
      this.sortValue = "";
      this.order_by = "desc";
      this.industryItemObj = {
        name:'全部',
        id:'0'
      };
      this.value01 = "不限";
      this.value02 = "不限";
      this.value03 = "不限";
      this.value04 = "不限";
      this.value05 = "不限";
      this.value06 = "不限";
      this.value07 = "";
      this.value08 = "不限";
      this.value09 = "不限";
      this.value10 = "不限,不限";
      this.value11 = "不限";
      this.value12 = "不限";
      this.value13 = "不限";
      this.value14 = "不限,不限";
      this.value15 = "不限";
      this.page = 1;
      this.table_data = [];
      this.getData();
      this.includePage = 1;
      this.includeList = [];
      this.includeSearch();
    },
    searchWord() {
      if (this.input) {
        this.sortValue = "";
        this.page = 1;
        this.table_data = [];
        this.getData();
        this.$axios({
          method: "get",
          url: "/api/customer/RecordSearchLog",
          params: {
            key: this.input,
          },
        })
          .then((res) => {
            // console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 收藏
    addStar(item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/InsertCollection",
          {
            CollectId: item.author_id,
            Module: 1, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.is_collec = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏
    cancelStar(item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: item.author_id,
            Module: 1, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.is_collec = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    cludeBox() {
      this.showInclude = true;
      this.includeData = false;
      this.clear_values();
      this.includePage = 1;
      this.includeList = [];
      this.includeSearch();
    },
    includeSearchOne() {
      this.includePage = 1;
      this.includeList = [];
      this.includeSearch();
    },
    // 查询收录
    includeSearch() {
      let that = this;
      that.hasSearch = true;
      that.loading01 = true;
      this.retryShow = false;
      that.$axios
        .get(
          "/api/author/GetAuthorSearch",
          {
            params: {
              keyword: that.includeWord,
              page: this.includePage,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          that.loading01 = false;
          if (res.data.code == 0) {
            if (res.data.data.length) {
              this.includeData = false;
              this.includePage += 1;
              this.includeList = this.includeList.concat(res.data.data);
            }
            if (res.data.data.length < 10 || !res.data.data) {
              this.includeData = true;
            }
            this.retryShow = false;
          } else if (res.data.code == 1001) {
            this.retryShow = true;
            this.includeData = false;
          } else if (res.data.code == 1002) {
            this.includeData = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getScroll(event) {
      // if (this.includeData) {
      //   return
      // } else {
      // 滚动条距离底部的距离scrollBottom
      let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight;

      if (
        scrollBottom == 0 &&
        this.includeData == false &&
        this.retryShow == false
      ) {
        this.includeSearch();
      }
      // }
    },

    // 确认收录
    toInclude(sec_uid, uid, item) {
      let that = this;
      that.$axios
        .post(
          "/api/author/include",
          {
            sec_uid: sec_uid,
            uid: uid,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message:
                "收录成功，我们将在10分钟内完成部分数据收录，请您稍后再试~",
              duration: 2000,
              customClass: "includeMessage",
              offset: 154,
            });
            item.exsit = 2;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
    closeBuy() {
      this.page = 1;
      this.table_data = [];
      this.getData();
    },
    toTalentDetails(id, exsit) {
      //  已收录的可以跳到详情
      if (exsit == 1) {
        let router = this.$router.resolve({
          path: `/talent_main/tdetails/${id}/0`,
        });
        window.open(router.href, "_blank");
      }
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > this.showScroll ? true : false;
    },
    // 返回顶部
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    // 点击表单获取搜索记录
    Inputfocus() {
      this.isShow = true;
      this.$axios({
        method: "get",
        url: "/api/customer/GetSearchLog",
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击搜素记录赋值给搜索框
    add_click(item) {
      this.isShow = false;
      this.input = item;
      this.searchWord();
    },
    // 点击x 删除该条搜索记录
    removeThis(id) {
      this.$axios({
        method: "get",
        url: "/api/customer/DeleteSearchLog",
        params: {
          ids: id,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = this.searchRecord.filter(
              (item) => item.id !== id
            );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击删除图标删除全部搜索记录
    removeAll() {
      let itemLog = "";
      this.searchRecord.forEach((item) => {
        itemLog += item.id + ",";
      });
      itemLog = itemLog.substring(0, itemLog.lastIndexOf(","));
      this.$axios({
        method: "get",
        url: "/api/customer/DeleteSearchLog",
        params: {
          ids: itemLog,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.searchRecord = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击别处 让搜索记录框消失
    thisFalse() {
      this.isShow = false;
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.initHeight);
  },
};
</script>
<style scoped lang="less">
.confirm_clear {
  margin-top: 50px;
  > button:first-child {
    background-color: #fd7f2c;
    color: #fff;
    line-height: 46px;
  }
  > button:last-child {
    background-color: #f5f5f5;
    border: solid 1px #e6e6e6;
    color: #888888;
    line-height: 44px;
    margin-left: 19px;
  }
  button {
    box-sizing: border-box;
    width: 150px;
    height: 48px;
    font-size: 16px;
    border-radius: 4px;
  }
}
.showCondition {
  border-top: dashed 1px #e5e5e5;
}
// 分割线
.dividerBox {
  border-top: 1px dashed #e5e5e5;
  position: relative;
  .dividerText {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    font-size: 14px;
    color: #fd7f2c;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 14px;
    img {
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
  }
}
.section01 {
  display: flex;
  > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #multi_select {
    margin-bottom: 20px;
  }
  #el_select {
    margin-right: 30px;
    margin-bottom: 20px;
  }
  #el_select_city {
    margin-right: 30px;
    margin-bottom: 20px;
  }
  > p {
    white-space: nowrap;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 32px;
    letter-spacing: 0px;
    color: #888888;
    margin-right: 20px;
  }
}
.mysearchBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .clearBox {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
    img {
      width: 15px;
      height: 16px;
    }
    span {
      font-size: 14px;
      color: #888888;
      padding-left: 5px;
    }
  }
  .Included {
    span {
      color: #fd7f2c !important;
    }
  }
}
.input_group {
  position: relative;
  width: 400px;
  height: 44px; // 边框为1时高度为40px
  border-radius: 4px 4px 4px 4px;
  border: solid 2px #fd7f2c;
  // border: solid 1px #e6e6e6;
  box-sizing: border-box;
  input {
    width: 100%;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 19px;
    padding-right: 70px;
    border: none;
    border-radius: 4px 4px 4px 4px;
    color: #222;
  }
  input::-webkit-input-placeholder  {
    color: #b5b5b5 !important;
  }
  > div {
    position: absolute;
    right: 0;
    cursor: pointer;
    top: -1px;
    text-align: center;
    width: 50px;
    height: 42px;
    background-color: #fd7f2c;
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 20px;
    }
  }
}
.InputRecord {
  width: 400px !important;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #fff !important;
  position: absolute !important;
  top: 192px !important;
  left: 222px;
  z-index: 10;
  padding: 4px 10px;
  box-shadow: 0px 0px 20px 0px rgba(236, 236, 236, 0.7);
  ul {
    .first {
      width: calc(100% - 14px);
      height: 32px;
      // background: chartreuse;
      font-size: 12px;
      line-height: 36px;
      color: #888888;
      padding-left: 14px;
      img {
        float: right;
        width: 15px;
        height: 16px;
        margin: 8px 9px 0px 0px;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .second {
      width: calc(100% - 14px);
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: #222222;
      padding-left: 14px;
      span {
        display: inline-block;
        width: 300px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &:hover {
        cursor: pointer;
        background-color: #f9f9f9;
      }
      &:hover img {
        display: block;
      }
      img {
        float: right;
        margin: 13px 11px 0px 0px;
        display: none;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.btn_group {
  margin-bottom: 10px;
  .active {
    background-color: #fd7f2c;
    color: #ffffff !important;
  }
  button {
    font-size: 14px;
    color: #555555;
    width: 100px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-right: 7px;
    font-weight: 600;
  }
}
#searchTalent {
  background: #f1f1f1;
  min-height: 100vh;
  margin-left: 14px;
  margin-right: 14px;
  padding-bottom: 1px;
  // padding: 0 20px;
  margin-top: 14px;
  // padding-top: 17px;
  // padding-bottom: 248px;
  .topBox {
    background-color: #fff;
    padding: 0 20px;
    padding-top: 17px;
    padding-bottom: 22px;
    border-radius: 4px 4px 0 0;
  }
}
#search_result {
  min-height: fit-content;
  padding: 0 20px;
  table {
    // margin-top: 19px;
    text-align: center;
    box-sizing: border-box;
    //margin-bottom: 20px;
    thead {
      th {
        padding: 0 5px;
        img {
          width: 5px;
          height: 10px;
          vertical-align: baseline;
        }
      }
      th:nth-child(1) {
        text-align: left;
        padding-left: 63px;
      }
      th:nth-child(7) {
        width: 12%;
      }
    }
    tbody {
      background-color: #fff;
      tr {
        height: 78px;
        td:nth-child(1) {
          width: 27%;
          text-align: left;
        }
        td:nth-child(2),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
        }
        // 商品
        .goodsBox {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          position: relative;
          .preImg {
            width: 50px;
            height: 50px;
            border-radius: 100px;
            margin-left: 33px;
            border: 1px solid #e5e5e5;
          }
          .goodsRight {
            flex: 1;
            text-align: left;
            margin-left: 13px;
            .top01 {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              img {
                width: 14px;
                height: 14px;
                margin-left: 5px;
              }
              .overflowTextWl {
                max-width: 120px;
                font-size: 14px;
                color: #222222;
                font-weight: 600;
                // padding-left: 5px;
              }
              .overflowTextWl:hover {
                color: #ff924b;
              }
              .details {
                height: 20px;
                line-height: 18px;
                width: 50px;
                text-align: center;
                background-color: #ffffff;
                border-radius: 10px;
                border: solid 1px #e5e5e5;
                box-sizing: border-box;
                font-size: 12px;
                color: #555555;
                margin-left: 4px;
              }
            }
            .bot01 {
              margin-top: 4px;
              p {
                display: inline-block;
                font-size: 14px;
                color: #888;
                padding-right: 24px;
              }
              // p:hover {
              //   color: #1779ff;
              // }
              .riceText {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #ea1b0b;
                padding-left: 6px;
              }
              .rateText {
                font-family: DINAlternate-Bold;
                font-size: 16px;
                color: #222222;
                padding-left: 8px;
              }
            }
          }
          // 直播标识
          .playingIcon {
            width: 18px;
            height: 18px;
            background: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border-radius: 4px;
            position: absolute;
            top: 34px;
            left: 66px;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            .playingText {
              font-size: 12px;
              color: #ffffff;
            }
          }
        }
        // 更新状态
        .updating {
          width: 62px;
          height: 22px;
          line-height: 22px;
          background-color: #f5f5f5;
          border-radius: 4px;
          font-size: 12px;
          color: #888888;
          text-align: center;
          margin: 0 auto;
          // border: solid 1px #e5e5e5;
        }
        .tdText01 {
          color: #222222;
          span {
            color: #1779ff;
          }
        }
      }
    }
  }
  .search-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    /deep/.el-pager li {
      border: 1px solid #e5e5e5;
      background-color: #ffffff;
    }
  }
  .type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
    .tips {
      span {
        font-family: DINAlternate-Bold;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #fd7f2c;
      }
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 16px;
      letter-spacing: 0px;
      color: #888888;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    background-color: #fff;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.includeDialog {
  box-sizing: border-box;
  padding: 30px;
  padding-right: 12px;
  // padding-bottom: 60px;
  border-radius: 4px;
  .diaTitle {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    padding-bottom: 20px;
  }
}
.includeInput {
  width: 530px !important;
}
.includeResult {
  height: 356px;
  overflow: auto;

  .includeItem {
    height: 92px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inLogo {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border: 1px solid #e5e5e5;
      border-radius: 50%;
      margin-right: 14px;
    }
    .nameBox {
      flex: 1;
      text-align: left;
      p:nth-child(1) {
        font-size: 16px;
        color: #222222;
        cursor: pointer;
      }
      p:nth-child(2) {
        font-size: 14px;
        color: #555555;
        padding-top: 3px;
      }
    }
    button {
      width: 88px;
      height: 32px;
      // background-color: #fff2e9;
      background-color: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      color: #fd7f2c;
      margin-right: 22px;
    }
    .toInclude {
      background-color: #fd7f2c;
      color: #ffffff;
    }
  }
}
.includeText {
  height: 30px;
  font-size: 14px;
  margin-top: 20px;
  text-align: center;
  color: #888888;
  span {
    color: #fd7f2c;
  }
}
// .searchRadio {
//   .radio_item:first-child {
//     border-radius: 4px 0px 0px 4px !important;
//   }
//   .radio_item:last-child {
//     border-radius: 0px 4px 4px 0px !important;
//   }
// }

.addIncludeBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 40px;
  line-height: 40px;
  background-color: #fd7f2c;
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 30px;
  cursor: pointer;
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  span {
    font-size: 14px;
    color: #ffffff;
  }
}
// .is_fixed{
//   position : fixed;
//   top :60px;
//   right: 14px;
//   left: 200px;
//   display: flex;
//   z-index: 999999;
//   background-color: #f5f9ff;
//   line-height: 52px;
//   min-width: 1096px;
//   overflow: hidden;
// }

.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 222;
  font-size: 0;

  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
    img {
      width: 5px;
      height: 10px;
      vertical-align: baseline;
    }
  }
  &.isShow {
    display: block;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
.cursor {
  cursor: pointer;
}
.codeImg {
  width: 100px;
  height: 100px;
}
.retryBox {
  cursor: pointer;
  font-size: 14px;
  color: #888888;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 13px;
  .imgBox {
    width: 34px;
    height: 36px;
    margin-bottom: 13px;
    background-image: url("../../../assets/li/refresh1.png");
  }
  .imgBox:hover {
    background-image: url("../../../assets/li/refresh2.png");
  }
}
.retryBox1 {
  width: 531px;
  height: 397px;
}
</style>
